<seed-content class="gray-background">
  <seed-toolbar-header>
    <seed-toolbar-title>首页</seed-toolbar-title>
    <seed-toolbar-menu></seed-toolbar-menu>
  </seed-toolbar-header>

  <seed-cycle [slides]="bannerObj" (clicked)="goToBannerTarget($event)" class="new-style"></seed-cycle>
  <seed-grid-nav [navList]="dataStore.goodsType" (clicked)="goToNavTarget($event)"
                 *ngIf="dataStore.goodsType.length>0"></seed-grid-nav>
  <!--<p [routerLink]="'/goods/topic'">专题页</p>-->
  <!--自定义布局商品或图链-->
  <div class="goods-module "
       [class.no-title]="module.displayTitle==0"
       *ngFor="let module of goodsModules">
    <!--[class.media-query]="stateStore.mediaQuery"-->
    <div *ngIf="module.contentList.length>0">

      <div class="module-title" *ngIf="module.displayTitle==1">
        <h1>{{module.columnTitle}}</h1>
      </div>

      <div class="module-content custom-module goods-list seed-flexbox seed-flexbox-content-between"
           *ngIf="module.displayTemplate==0">
        <div class="goods-card" *ngFor="let goods of module.contentList"
             [class.full]="goods.verticalDisplay==0"
             [class.half]="goods.verticalDisplay==1"
             [class.third]="goods.verticalDisplay==3"
             [class.quarter]="goods.verticalDisplay==2"
             (click)="handleDetail(goods)"
        >
          <div class="container "
               [class.goods-container]="goods.contentType==1"
               [class.image-container]="goods.contentType==0"
          >
            <!--正方形商品和全宽商品-->
            <div class="cover aaa"
                 *ngIf="goods.layoutType==='halfGoods'||goods.layoutType==='fullGoods'"
                 [style.height]="layoutStore.columnType.two.imgHeight+'px'">
              <seed-img [background]="goods.iconUrl" [defaultImg]="'middle'" [lazyLoadImg]="goods.iconUrl"></seed-img>
            </div>
            <!--竖状链接图片-->
            <div class="cover ccc" *ngIf="goods.layoutType==='halfPicture'"
                 [style.height]="layoutStore.columnType.two.imgHeight/0.67+'px'">
              <seed-img [background]="goods.iconUrl" [defaultImg]="'middle'" [lazyLoadImg]="goods.iconUrl"></seed-img>
            </div>

            <!--全宽链接图片-->
            <div class="cover ddd" *ngIf="goods.layoutType==='fullPicture'"
                 [style.height]="layoutStore.columnType.one.imgHeight+'px'">
              <seed-img [background]="goods.iconUrl" [defaultImg]="'long'" [lazyLoadImg]="goods.iconUrl"></seed-img>
            </div>
            <!--一行三列-->
            <div class="cover eee"
                 *ngIf="goods.layoutType==='third'"
                 [style.height]="layoutStore.columnType.three.imgHeight+'px'">
              <seed-img [background]="goods.iconUrl" [defaultImg]="'middle'" [lazyLoadImg]="goods.iconUrl"></seed-img>
            </div>
            <!--一行四列-->
            <div class="cover fff"
                 *ngIf="goods.layoutType==='quarter'"
                 [style.height]="layoutStore.columnType.four.imgHeight+'px'">
              <seed-img [background]="goods.iconUrl" [defaultImg]="'middle'" [lazyLoadImg]="goods.iconUrl"></seed-img>
            </div>
            <!--文字-->
            <div class="content" *ngIf="goods.layout!=1">
              <div class="title-box">
                <h2 class="title text-ellipsis" *ngIf="goods.layout==2||goods.layout==3">{{goods.displayText}}</h2>
              </div>
              <p *ngIf="goods.layout==3" class="price-box">
                <i class="symbol" *ngIf="goods.price>0">￥</i>
                <span class="price" [class.free]="goods.price===0">{{goods.price|money}}</span>
              </p>
            </div>
          </div>
        </div>
      </div>

      <!-- 一行多列模块 start-->
      <div class="module-content columns-module "
           *ngIf="module.displayTemplate==2||module.displayTemplate==3"
           [class.four-columns]="module.displayTemplate==2"
           [class.three-columns]="module.displayTemplate==3"
      >
        <div class="item" *ngFor="let goods of module.contentList" (click)="handleDetail(goods)">
          <div class="cover" [style.height]="layoutStore.columnType.three.imgHeight+'px'"
               *ngIf="module.displayTemplate==3">
            <seed-img [background]="goods.iconUrl" [defaultImg]="'middle'" [lazyLoadImg]="goods.iconUrl"></seed-img>
          </div>
          <div class="cover" [style.height]="layoutStore.columnType.four.imgHeight+'px'"
               *ngIf="module.displayTemplate==2">
            <seed-img [background]="goods.iconUrl" [defaultImg]="'middle'" [lazyLoadImg]="goods.iconUrl"></seed-img>
          </div>

          <div class="text-content" *ngIf="goods.layout!=1">
            <h2 class="title text-ellipsis" *ngIf="goods.layout==2||goods.layout==3">{{goods.displayText}}</h2>
            <p class="price-box" *ngIf="goods.layout==3">
              <i class="symbol" *ngIf="goods.price>0">￥</i>
              <span class="price" [class.free]="goods.price===0">{{goods.price|money}}</span>
            </p>
          </div>

        </div>

      </div>
      <!-- 一行多列模块 end-->
      <!--滑动模块 start-->
      <div class="module-content scroll-module"
           *ngIf="module.displayTemplate===4">
        <div class="item" *ngFor="let goods of module.contentList"
             [class.scroll-banner]="goods.shape==0"
             [class.scroll-goods]="goods.shape==1"
             (click)="handleDetail(goods)">

          <div class="cover" [style.height]="layoutStore.columnType.threeHalf.imgHeight+'px'"
               *ngIf="goods.shape==1">
            <seed-img [background]="goods.iconUrl" [defaultImg]="'middle'" [lazyLoadImg]="goods.iconUrl"></seed-img>
          </div>
          <div class="cover" [style.height]="layoutStore.columnType.oneHalf.imgHeight+'px'"
               *ngIf="goods.shape==0">
            <seed-img [background]="goods.iconUrl" [defaultImg]="'middle'" [lazyLoadImg]="goods.iconUrl"></seed-img>
          </div>

          <div class="text-content" *ngIf="goods.layout!=1">
            <h2 class="title text-ellipsis" *ngIf="goods.layout==2||goods.layout==3">{{goods.displayText}}</h2>
            <p *ngIf="goods.layout==3" class="price-box">
              <i class="symbol" *ngIf="goods.price>0">￥</i>
              <span class="price" [class.free]="goods.price===0">{{goods.price|money}}</span>
            </p>
          </div>

        </div>
      </div>
      <!--滑动模块 end-->
    </div>
  </div>

  <!--服务优选-->
  <seed-infinite-scroll (infiniteScroll)="getRecommendGoods()" *ngIf="recommendGoods">
    <seed-recommend-goods [goods]="recommendGoods" [title]="'服务优选'"></seed-recommend-goods>
    <seed-infinite-scroll-content *ngIf="recommendGoods.length>0"></seed-infinite-scroll-content>
  </seed-infinite-scroll>
</seed-content>


